<template>
  <div class="page-product">
    <el-row>
      <Crumbs :keyword="keyword"/>
    </el-row>
    <el-row>
      <el-col :span="19">
        <Area :areas="areas" />
        <List :list="list" />
      </el-col>
      <el-col :span="5">
        <AMap v-if="point.length" :width="230" :height="290" :point="point" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Crumbs from '../components/products/crumbs'
import Area from '../components/products/area'
import List from '../components/products/list'
import AMap from '../components/public/map'
export default {
  components: {
    Crumbs,
    Area,
    List,
    AMap
  },
  data() {
    return {
      list:[],
      areas:[],
      keyword:'',
      point:[]
    }
  },
  async asyncData(ctx) {
    let keyword = ctx.query.keyword
    let city = ctx.store.state.api.position.city
    
    let {status, data: {count, pois}} = await ctx.store.dispatch('api/searchByKeywords', { keyword, city })
    let {status: status2, data: {city: {areas}}} = await ctx.store.dispatch('api/getCity', city)
    if (status === 200 && status2 === 200 && count > 0) {
      return {
        list: pois.filter(item => item.photos.length > 0).map(item => {
          return {
            type: item.type,
            img: item.photos[0].url,
            name: item.name,
            comment: Math.floor(Math.random() * 10000),
            rate: Number(item.biz_ext.rating),
            price: Number(item.biz_ext.cost),
            scene: item.tag,
            tel: item.tel,
            status: '可订明日',
            location: item.location,
            module: item.type.split(',')[0]
          } 
        }),
        keyword,
        areas,
        point: (pois.find(item => item.location).location || '').split(',')
      }
    }
  }
}
</script>
<style lang="scss">
@import "@/assets/css/products/index.scss";
</style>